<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <div slot="header">
          <!-- pagetools工具栏组件 -->
          <PageTools>
            <template #before>
              <el-button type="primary" size="small" @click="addFn">
                添加经纪
              </el-button>
            </template>
            <template #after>
              <el-input v-model="searchValue" placeholder="请输入关键字">
                <!-- slot="append" 出自element组件table表格的Table Slot方法里
              append：代表放在紧贴在依赖组件的后面
               -->
                <el-button slot="append" icon="el-icon-search" @click="search" />
              </el-input>
            </template>
          </PageTools>
        </div>
        <!-- 表格部分 -->
        <div>
          <el-table border :data="perList" style="width: 100%">
            <el-table-column prop="picture" label="图片" width="150px">
              <img style="width: 100%; height: 200px" src="http://localhost:9528/static/img/2.2f6ea906.jpg" alt="">
            </el-table-column>
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="phone" label="电话" />
            <el-table-column prop="address" label="地址" />
            <el-table-column prop="desc" label="介绍" />
            <el-table-column prop="operate" label="操作" width="200px">
              <template v-slot="{row}">
                <el-button type="primary" size="small" @click="editFn(row.id)">编辑</el-button>
                <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            :page-size="limit"
            layout="prev, pager, next"
            :total="total"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>
      <Addjingji
        ref="addjingji"
        :show-dialog.sync="visibleDialog"
        @updateEvent="getJingJi"
        @updateTotal="getJingJitotal"
      />
    </div>
  </div>
</template>

<script>
import { getJingJi, getJingJitotal, delJingJiList } from '@/api/jingji'
import Addjingji from './components/addjingji.vue'

export default {
  components: { Addjingji },
  data() {
    return {
      perList: [], // 经纪列表数据
      start: 0, // 页码
      limit: 2, // 每页请求的数量
      total: 0, // 经纪人总数量
      visibleDialog: false, // 控制新增权限弹窗显示隐藏
      searchValue: ''
    }
  },
  created() {
    this.getJingJi()
    this.getJingJitotal()
  },
  methods: {
    // 模糊搜索
    search() {
      this.getJingJi()
    },
    // 绑定删除事件
    delFn(id) {
      this.$confirm('确定删除吗？', '提示', {
        type: 'warning'
      }).then(async() => {
        // console.log('点击了确定按钮')
        // 根据id删除经纪
        await delJingJiList(id)
        if (this.perList.length === 2 && this.start !== 0) {
          this.start--
        }
        // 更新页码
        this.getJingJitotal()
        // 更新页面
        this.getJingJi()
      }).catch(err => {
        console.log('点击了取消按钮 或者 then中的代码报错了：', err)
      })
    },
    // 绑定编辑事件，并给编辑事件处理函数传id
    editFn(id) {
      // 显示弹窗
      this.visibleDialog = true
      this.$refs.addjingji.edtiJingJiList(id)
    },
    // 添加经纪
    addFn() {
      // 打开新增弹窗
      this.visibleDialog = true
    },
    // 分页 页码发生改变时触发
    currentChange(val) {
      // console.log(val)
      this.start = (val - 1) * 2
      this.getJingJi()
    },

    // 获取经纪数量
    async getJingJitotal() {
      const res = await getJingJitotal()
      // console.log(55, res)
      this.total = res.data
    },

    // 获取经纪列表
    async getJingJi() {
      const res = await getJingJi({
        _limit: this.limit,
        _start: this.start,
        name_contains: this.searchValue
      })
      // console.log(33, res)
      // 保存经纪列表
      this.perList = res.data
    }
  }
}
</script>

<style>

</style>
